<template>
  <div class="create-post-page container2">
    <h1 class="title">新建文章</h1>
    <uploader
      action="/upload"
      :beforeUpload="uploadCheck"
      @uploadSuccess="onUploadSuccess"
      @uploadError="onUploadError"
      class="upload-wrap"
    >
      <!-- 未上传状态 -->
      <h2 class="unUpload">点击上传文章专栏图片</h2>
      <!-- 正在上传状态 -->
      <template v-slot:uploading>
        <div class>
          <!-- role 增强语义 -->
          <h2 role="status">正在上传中，请稍后</h2>
        </div>
      </template>
      <!-- 上传成功状态 -->
      <template v-slot:uploading-success="slotProps">
        <img :src="slotProps.uploadData.url" alt width="500" />
      </template>
    </uploader>
    <validate-form @form-sumit="onFormSumit">
      <p class="text-label">文章标题:</p>
      <validate-input
        placeholde="请输入文章标题"
        :rules="titleRules"
        v-model="titleVal"
        :maxLength="20"
      ></validate-input>
      <p class="text-label">文章简介:</p>
      <validate-input
        placeholde="请输入文章简介"
        v-model="excerptVal"
        tagType="textarea"
        rows="4"
        :maxLength="20"
      ></validate-input>
      <p class="text-label">文章详情:</p>
      <validate-input
        placeholde="请输入文章详情"
        :rules="contentRules"
        v-model="contentVal"
        type="content"
        tagType="textarea"
        rows="10"
      ></validate-input>
      <template #submit>
        <div class="sumit-btn">
          <button class="btn btn-primary">发表文章</button>
        </div>
      </template>
    </validate-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import ValidateForm from "@/components/ValidateForm.vue";
import ValidateInput, { RulesProps } from "../components/ValidateInput.vue";
import { useRouter } from "vue-router";
import { useMainStore } from "@/stores/main";
import { PostProps, ResponseType, ImageProps } from "@/share/propsType";
import Uploader, { CheckFunc } from "../components/Uploader.vue";
import createMessage from "../components/CreateMessage";
import { beforeUploadCheck } from "../share/helper";

import { createPost } from "@/api/api";
const titleRules: RulesProps = [
  { type: "required", message: "文章标题不能为空" },
];
const contentRules: RulesProps = [
  { type: "required", message: "文章内容不能为空" },
];
export default defineComponent({
  components: {
    ValidateForm,
    ValidateInput,
    Uploader,
  },
  setup() {
    const store = useMainStore();
    const router = useRouter();
    const titleVal = ref("");
    const contentVal = ref("");
    const excerptVal = ref("");
    let image = "";
    /* 上传成功 */
    const onUploadSuccess = (data: ImageProps) => {
      image = data.url as string;
    };
    /* 上传失败 */
    const onUploadError = (err: any) => {
      console.log("上传失败", err);
    };
    /* validateForm 提交 */
    const onFormSumit = async (result: boolean) => {
      if (result) {
        // 取出登录状态下存储的user信息
        const { column } = store.user;
        if (column) {
          const newPost: PostProps = {
            title: titleVal.value,
            content: contentVal.value,
            excerpt: excerptVal.value,
            column,
            image,
          };
          await createPost(newPost);
          createMessage("创建文章成功，跳转至我的专栏页面", "success");
          router.push({ name: "column", params: { id: column } });
        }
      }
    };
    /* 上传验证函数 */
    const uploadCheck: CheckFunc = (file: File) => {
      const { passd, error } = beforeUploadCheck(file, {
        format: ["image/jpeg", "image/png"],
        size: 1,
      });
      if (error === "size") {
        createMessage("文件过大，不宜上传", "error");
      }
      if (error === "format") {
        createMessage("文件格式不对，请重新选择", "error");
      }
      return passd;
    };
    return {
      titleRules,
      contentRules,
      titleVal,
      contentVal,
      excerptVal,
      onFormSumit,
      onUploadSuccess,
      onUploadError,
      uploadCheck,
    };
  },
});
</script>
<style lang="scss" scoped>
.title {
  margin: 20px 0;
}
.sumit-btn {
  margin-top: 20px;
  text-align: right;
}
</style>
<style lang="scss">
.create-post-page .upload-wrap {
  cursor: pointer;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.create-post-page .upload-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
</style>
